{% extends "layout.html" %}

{% block content %}
<style>
.status-scanned {
    background-color: #DEF7EC;
    color: #03543F;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}
.status-unscanned {
    background-color: #FDE8E8;
    color: #9B1C1C;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}
</style>

<!-- WebSocket 状态指示器 -->
<div id="ws-status" class="fixed top-4 right-4 z-50 p-2 rounded-lg shadow-lg flex items-center space-x-2">
    <span id="ws-indicator" class="h-3 w-3 rounded-full bg-gray-500"></span>
    <span id="ws-text" class="text-sm font-medium">未连接</span>
</div>

<!-- 调试面板 -->
<div id="debug-panel" class="fixed bottom-4 right-4 z-50 bg-white p-4 rounded-lg shadow-lg" style="display: none;">
    <h3 class="text-lg font-semibold mb-2">WebSocket 调试信息</h3>
    <div id="debug-log" class="text-sm space-y-1 max-h-40 overflow-y-auto"></div>
</div>

<div x-data="packageTracker" x-cloak>
    <!-- 通知消息 -->
    <div x-show="notification.show" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-90"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-90"
         :class="{
             'border-l-4 p-4 mb-4 rounded shadow-sm': true,
             'bg-green-100 border-green-400 text-green-700': notification.type === 'success',
             'bg-red-100 border-red-400 text-red-700': notification.type === 'error'
         }">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg x-show="notification.type === 'success'" class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <svg x-show="notification.type === 'error'" class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm" x-text="notification.message"></p>
            </div>
            <div class="ml-auto pl-3">
                <div class="-mx-1.5 -my-1.5">
                    <button @click="notification.show = false" class="inline-flex rounded-md p-1.5" :class="notification.type === 'success' ? 'text-green-500 hover:bg-green-100' : 'text-red-500 hover:bg-red-100'">
                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航链接 -->
    <div class="border-b border-gray-200 mb-6">
        <nav class="flex -mb-px">
            <a href="{{ url_for('scan') }}" 
               class="py-4 px-6 text-center border-b-2 border-blue-500 font-medium text-sm text-blue-600">
                {{ _('扫描管理') }}
            </a>
            <a href="{{ url_for('batch') }}" 
               class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                {{ _('批次管理') }}
            </a>
            <a href="{{ url_for('report') }}" 
               class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                {{ _('报表管理') }}
            </a>
            <a href="{{ url_for('txconfig') }}" 
               class="py-4 px-6 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
                {{ _('通信配置') }}
            </a>
        </nav>
    </div>

    <!-- 当前包裹信息 -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
                <h2 class="text-xl font-semibold text-gray-800 mb-2">{{ _('当前包裹信息') }}</h2>
                <div class="space-y-2">
                    <p>
                        <span class="font-medium">{{ _('当前包裹号') }}:</span> 
                        <span x-text="currentPackage || '无'" :class="currentPackage ? 'text-blue-600 font-bold' : 'text-gray-500'"></span>
                    </p>
                    <p>
                        <span class="font-medium">{{ _('命中的批次号') }}:</span> 
                        <span x-text="matchedBatch || '无'" :class="matchedBatch ? 'text-blue-600 font-bold' : 'text-gray-500'"></span>
                    </p>
                </div>
            </div>
            <div>
                <h2 class="text-xl font-semibold text-gray-800 mb-2">{{ _('批次统计') }}</h2>
                <div x-show="currentBatch" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <!-- 包裹总数 -->
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <h3 class="text-lg font-medium text-blue-800 mb-2">{{ _('总包裹数') }}</h3>
                        <p class="text-3xl font-bold text-blue-600" x-text="batchStats.total || 0"></p>
                    </div>
                    
                    <!-- 已扫描 -->
                    <div class="bg-green-50 p-4 rounded-lg">
                        <h3 class="text-lg font-medium text-green-800 mb-2">{{ _('已扫描') }}</h3>
                        <p class="text-3xl font-bold text-green-600" x-text="batchStats.scanned || 0"></p>
                    </div>
                    
                    <!-- 未扫描 -->
                    <div class="bg-red-50 p-4 rounded-lg">
                        <h3 class="text-lg font-medium text-red-800 mb-2">{{ _('未扫描') }}</h3>
                        <p class="text-3xl font-bold text-red-600" x-text="batchStats.unscanned || 0"></p>
                    </div>
                    
                    <!-- 完成率 -->
                    <div class="bg-purple-50 p-4 rounded-lg">
                        <h3 class="text-lg font-medium text-purple-800 mb-2">{{ _('完成率') }}</h3>
                        <p class="text-3xl font-bold text-purple-600" x-text="batchStats.completion ? `${batchStats.completion}%` : '0%'"></p>
                    </div>
                </div>
                <div x-show="!currentBatch" class="bg-gray-50 rounded-lg p-6 text-center">
                    <p class="text-base text-gray-500 font-medium">{{ _('未选择批次') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 批次选择 -->
    <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">{{ _('批次选择') }}</h2>
        <div class="mb-4">
            <label for="batch-select" class="block text-sm font-medium text-gray-700 mb-1">{{ _('选择批次') }}</label>
            <select id="batch-select" 
                    x-model="currentBatch" 
                    @change="changeBatch()"
                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <option value="">{{ _('-- 选择批次 --') }}</option>
                <template x-for="batch in batches" :key="batch.batch_id">
                    <option :value="batch.batch_id" x-text="batch.batch_id"></option>
                </template>
            </select>
        </div>
    </div>

    <!-- 扫描区域 -->
    <div class="bg-white shadow rounded-lg p-6 mt-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">{{ _('包裹扫描') }}</h2>
        <div class="space-y-4">
            <div>
                <label for="scan-input" class="block text-sm font-medium text-gray-700 mb-1">{{ _('扫描包裹条码') }}</label>
                <div class="flex">
                    <input id="scan-input" 
                           type="text" 
                           x-model="scanInput" 
                           @keydown.enter="processScan()"
                           placeholder="{{ _('请扫描包裹条码或手动输入') }}"
                           class="flex-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    <button @click="processScan()" 
                            class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        {{ _('处理扫描') }}
                    </button>
                </div>
            </div>

            <!-- 导入区域 -->
            <div class="border-t border-gray-200 pt-4 mt-4">
                <h3 class="text-lg font-medium text-gray-800 mb-3">{{ _('数据导入') }}</h3>
                
                <!-- 文件导入 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ _('文件导入') }}</label>
                    <div class="flex">
                        <input type="file" 
                               id="file-import" 
                               @change="handleFileImport($event)"
                               class="flex-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        <button @click="importPackages('file')" 
                                class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                            {{ _('导入包裹') }}
                        </button>
                    </div>
                </div>
                
                <!-- 粘贴导入 -->
                <div>
                    <label for="paste-input" class="block text-sm font-medium text-gray-700 mb-1">{{ _('粘贴导入') }}</label>
                    <textarea id="paste-input" 
                              x-model="pasteInput" 
                              placeholder="{{ _('请粘贴包裹数据，每行一个包裹号') }}"
                              rows="5"
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-3"></textarea>
                    <div class="flex space-x-3">
                        <button @click="importPackages('paste')" 
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                            {{ _('粘贴导入') }}
                        </button>
                        <button @click="matchPackages()" 
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
                            {{ _('匹配') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 扫描记录表格 -->
    <div class="bg-white shadow rounded-lg p-6 mt-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-800">{{ _('扫描记录') }}</h2>
            <button @click="deleteSelectedPackages('scan')" 
                    class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                {{ _('删除选中行') }}
            </button>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" @click="toggleAllPackages('scan')" x-model="selectAllScan" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('包裹单号') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('批次') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('状态') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('首次扫描') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('最后扫描') }}
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ _('操作员') }}
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="(pkg, index) in scanPackages" :key="pkg.package_id">
                        <tr :class="{'bg-gray-50': index % 2 === 0}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" x-model="selectedScanPackages" :value="pkg.package_id" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.package_id" class="text-sm font-medium text-gray-900"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.batch_id" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.status" 
                                      :class="{
                                          'px-2 py-1 text-sm rounded-full': true,
                                          'bg-green-100 text-green-800': pkg.status === '已扫描' || pkg.status === 'scanned',
                                          'bg-red-100 text-red-800': pkg.status === '未扫描' || pkg.status === 'unscanned'
                                      }">
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.first_scan || '-'" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.last_scan || '-'" class="text-sm text-gray-500"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span x-text="pkg.operator || '-'" class="text-sm text-gray-500"></span>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="scanPackages.length === 0">
                        <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">
                            {{ _('暂无数据') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加音效 -->
<audio id="scanSound" src="{{ url_for('static', filename='sound/scan.mp3') }}"></audio>
<audio id="errorSound" src="{{ url_for('static', filename='sound/error.mp3') }}"></audio>

{% endblock %}

{% block scripts %}
<!-- 添加 Socket.IO 客户端库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>

<!-- 添加自定义JavaScript文件 -->
<script src="{{ url_for('static', filename='js/websocket.js') }}"></script>
<script src="{{ url_for('static', filename='js/notification.js') }}"></script>
<script src="{{ url_for('static', filename='js/sound.js') }}"></script>
<script src="{{ url_for('static', filename='js/packageTracker.js') }}"></script>
{% endblock %}
